<template>
	<div class="login-container">
		<div class="login-form-wrap">
			<div class="login-head">
				<div class="logo">商城项目后台管理系统</div>
			</div>
			<el-form ref="form" class="login-form" :model="user" :show-message="false" :rules="rules">
				<el-form-item prop="loginAccount">
					<el-input v-model="user.loginAccount" placeholder="请输入手机号"/>
				</el-form-item>
				<el-form-item prop="loginPassword">
					<el-input v-model="user.loginPassword" placeholder="请输入密码"/>
				</el-form-item>
				<el-form-item>
					<el-button :loading="submitLoading" class="login-btn" type="primary" @click="login">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import constants from '@/config/constants'
import sysUserApi from '@/api/sysUserApi'
	
export default {
	name: 'login',
	data () {
		return {
			submitLoading: false,
			user: {
				loginAccount: '13000000000',
				loginPassword: '123456'
			},
			/* 校验规则 */
			rules: {
				loginAccount: [
					{required: true, message: '请输入登录账号'},
					{pattern: /^1[34578]\d{9}$/, message: '手机号码格式错误'}
				],
				loginPassword: [{required: true, message: '请输入密码'}]
			}
		}
	},
	methods: {
		/* 登录 */
		async login () {
			this.$refs.form.validate(async (valid, error) => {
				/* 校验数据 */
				if(valid){
					this.submitLoading = true;
					const result = await sysUserApi.login(this.user)
					this.submitLoading = false;
					if(result.code == 200){
						this.$message.success("登录成功")
						this.$store.commit(constants.STORE.SET_TOKEN, {
						  "id": result.data.memberInfo.id,
						  "token": result.data.token
						});
						setTimeout(() => {
							this.$router.replace("/")
						}, 500)
					}else{
						this.$message.error(result.msg);
					}
				}else{
					this.$message.error(error[Object.keys(error)[0]][0].message)
				}
			})
		}
	}
}	
</script>

<style lang="scss">
.login-container {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: url('') no-repeat;
	background-size: cover;
	.login-form-wrap {
		position: relative;
		top: -50px;
		min-width: 300px;
		padding: 30px 50px 10px;
		background-color: #fff;
		border-radius: 10px;
		.login-head {
			display: flex;
			justify-content: center;
			.logo {
				text-align: center;
				font-weight: bold;
				width: 200px;
				height: 57px;
				background-size: contain;
			}
		}
		.login-form {
			.login-btn {
				width: 100%;
			}
		}
	}
}
</style>
